/**
 * =======================================================================
 * Page Layout Styles - 页面基础布局样式
 * =======================================================================
 *
 * 这个文件包含了页面的基础布局样式，包括：
 * - 页面容器样式
 * - 卡片容器样式
 * - 基础间距设置
 * - 响应式布局
 *
 * @version 1.0.0
 * @author Anypay Team
 * =======================================================================
 */

/* =======================================================================
   1. 页面基础布局样式
   ======================================================================= */

/**
 * Apple风格页面基础布局
 * 适用于所有管理页面的容器元素
 */
.anypay-apple-list-page {
  padding: 32px;
  background: #fafafa; /* Apple 极浅灰背景 */
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =======================================================================
   2. 卡片容器样式
   ======================================================================= */

/**
 * Apple风格卡片容器
 * 为内容区域提供卡片化的视觉容器
 */
.anypay-apple-card .ant-card {
  border-radius: 12px; /* Apple 风格大圆角 */
  border: 1px solid rgba(0, 0, 0, 0.04);
  background: #ffffff;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 8px rgba(0, 0, 0, 0.02); /* 多层次柔和阴影 */
  margin-bottom: 20px;
}

/**
 * 卡片内容区域样式
 */
.anypay-apple-card .ant-card-body {
  padding: 24px;
}

/* =======================================================================
   3. 基础间距工具类
   ======================================================================= */

/**
 * 间距工具类
 * 用于快速调整元素间距
 */
.anypay-apple-mb-6 {
  margin-bottom: 24px !important;
}

.anypay-apple-ml-2 {
  margin-left: 8px;
}

/* =======================================================================
   4. 响应式设计
   ======================================================================= */

/**
 * 移动端适配
 * 在小屏幕设备上调整布局和间距
 */
@media (max-width: 768px) {
  .anypay-apple-list-page {
    padding: 16px;
  }
}

/**
 * 平板端适配
 */
@media (max-width: 1024px) {
  .anypay-apple-list-page {
    padding: 24px;
  }
}